<template>
    <div class="field-control field-control-inline" :class="{'field-control-error': validate}">
        <Input :disabled="disabled" ref="input" v-if="!expand || !tl" :name="name" :type="inputType" @input="valueInput" :value="value">
        </Input>
        <Input v-else :disabled="disabled" :name="name" :autosize="{}" type="textarea" @input="valueInput" :value="value" :style="{'min-width':textWidth()+'px'}">
        </Input>
        <span ref="virtual" class="virtual-input">{{value}}</span>
        <span v-if="tl" class="tran-btn" @click="triggerExpand(!expand)">
            <Icon v-if="!expand" type="arrow-expand">
            </Icon>
            <Icon v-else type="arrow-shrink"></Icon>
        </span>
        <div class="field-message" v-show="!validate">{{message}}</div>
    </div>
</template>

<script>
import base from './base'
export default {
    extends: base,
    data() {
        return {
            expand: false,
            inputWidth: null,
            //过长标记
            tl: false
        }
    },
    watch: {
    },
    methods: {
        triggerExpand(v) {
            this.expand = v
        },
        textWidth() {
            if (this.$el.offsetWidth > this.inputWidth) {
                return this.$el.offsetWidth
            } else {
                return this.inputWidth
            }
        },
        updateWidth() {
            if (this.$refs.virtual) {
                this.inputWidth = this.$refs.virtual.offsetWidth
                if (this.$refs.input) {
                    if (this.$refs.input.$el.offsetWidth < this.inputWidth) {
                        this.tl = true
                    } else {
                        this.tl = false
                    }
                }
            }
        },
        valueInput(v) {
            this.$emit('input', v)
            this.updateWidth()
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.updateWidth()
        })
    },
    updated() {
        //this.updateWidth()
    }
}
</script>
<style lang="less">
.field-control-inline {
    position: relative;
    textarea.ivu-input {
        font-size: 12px;
        width: 100% !important;
    }
}

.virtual-input {
    position: absolute;
    z-index: 0;
    padding: 0 8px;
    visibility: hidden;
    max-width: 398px;
    word-wrap: break-word;
    white-space: pre;
    height: 1px;
    overflow: hidden;
}

.tran-btn {
    font-size: 16px;
    position: absolute;
    z-index: 2;
    right: 2px;
    top: -2px;
    cursor: pointer;
    color: rgba(45, 140, 240, 0.60);
}
</style>
